<script setup lang="ts">
import { reactive, ref, toRaw } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { useQuery } from "@/hooks/init";
import { useShare } from "@/hooks/share";
import { offline_course_info_api } from "@/package/mall/api/guider_home";
import { previewImage } from "@/utils/meida";
import { Account } from "@/utils/account";
import { Router } from "@/utils/router";
import { Toast } from "@/utils/toast";

import Swipe from "@/components/swipe/swipe.vue";
import DetailCourseItem from "./components/detail-course-item.vue";
import DetailMenuBtn from "../goods/components/detail-menu-btn.vue";
import ServiceContact from "@/components/service/contact.vue";
import FormButton from "@/components/form/button.vue";

onLoad((options) => {
  useQuery<{ id: string }>(options as MiniApp.AppLaunchOption, (query) => {
    offline_course_info_api({ id: query.id }).then((resp) => {
      // uni.setNavigationBarTitle({ title: resp.title });

      adList.value = (resp.pic_url_arr as string[]).map((i) => {
        return { type: "img", url: i };
      });
      if (resp.video_url) {
        adList.value.unshift({
          type: "video",
          url: resp.video_url,
          poster: resp.pic_url_arr[0],
        });
      }
      infoData.price = resp.price;
      infoData.balance_payment = resp.balance_payment;
      infoData.title = resp.title;
      infoData.tag_arr = resp.tag_arr;
      infoData.sold_count_str = resp.sold_count_str;
      infoData.content = resp.content.replace(
        /\<img/gi,
        '<img class="detail-intro-img" '
      );
      courseList.value = resp.course_list;

      shareOption.title = resp.title;
      shareOption.imageUrl = resp.pic_url_arr[0];
    });

    tempData.id = query.id;

    shareOption.data = { id: query.id };
  });
});

const adIndex = ref(0);
const adList = ref<any[]>([]);
const adClick = () => {
  const _adList = toRaw(adList.value);
  const _adIndex = toRaw(adIndex.value);
  if (_adList[_adIndex].type === "video") {
  } else {
    // 第一个是否是视频
    if (_adList[0].type === "video") {
      previewImage(
        _adList.filter((i) => i.type === "img").map((i) => i.url),
        _adIndex - 1
      );
    } else {
      previewImage(
        _adList.map((i) => i.url),
        _adIndex
      );
    }
  }
};

const infoData = reactive({
  price: "",
  balance_payment: "",
  title: "",
  tag_arr: [] as string[],
  sold_count_str: "",
  content: "",
});

const courseList = ref<any[]>([]);

const buyClick = () => {
  Account.checkLogin((isLogin) => {
    Router.navigateToOrRedirectTo(
      isLogin,
      `/package/mall/pages/train/order?${Router.dataToQuery({
        id: tempData.id,
        name: infoData.title,
        price: infoData.price,
        balancePrice: infoData.balance_payment,
      })}`
    );
  });
};

const tempData = { id: "" };

const { onShareAppMessage, onShareTimeline, shareOption } = useShare(
  "/package/mall/pages/train/detail"
);
</script>

<template>
  <view class="detail-ad" @click="adClick">
    <Swipe v-model="adIndex" :listData="adList" />
  </view>

  <view class="detail-price">
    <view class="detail-price-first">
      <view class="detail-price-first2">首期款</view>
      <view class="detail-price-first3">
        <text class="detail-price-first4">¥</text>{{ infoData.price }}
      </view>
    </view>
    <view class="detail-price-balance">
      <view class="detail-price-balance2">
        <view class="detail-price-balance3">尾款</view>
        <view class="detail-price-balance4">
          <text class="detail-price-balance5">¥</text
          >{{ infoData.balance_payment }}
        </view>
      </view>
      <view class="detail-price-balance6">尾款将在课程结束后额外支付</view>
    </view>
  </view>

  <view class="detail-info">
    <view class="detail-info-name">{{ infoData.title }}</view>
    <view style="display: flex; align-items: center">
      <view class="detail-info-tag" v-for="i of infoData.tag_arr" :key="i">
        {{ i }}
      </view>
      <view class="detail-info-sale">{{ infoData.sold_count_str }}</view>
    </view>
  </view>

  <view class="detail-intro">
    <view class="detail-intro-title">产品详情</view>
    <view class="detail-intro-html">
      <rich-text :nodes="infoData.content" />
    </view>
  </view>

  <view class="detail-course" v-if="courseList.length !== 0">
    <view class="detail-course-title">赠送课程</view>
    <view class="detail-course-wrapper">
      <view class="detail-course-item" v-for="(i, d) of courseList" :key="i.id">
        <view class="detail-course-line" v-if="d !== 0"></view>
        <DetailCourseItem :info="i" />
      </view>
    </view>
  </view>

  <view class="detail-fixed">
    <view class="detail-fixed-menu">
      <DetailMenuBtn
        icon="/package/mall/static/goods-contact.png"
        text="咨询"
      />
      <ServiceContact />
    </view>
    <view class="detail-fixed-btn" @click="buyClick">
      <FormButton>立即购买</FormButton>
    </view>
  </view>
</template>

<style lang="scss">
page {
  padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
}

.detail-ad {
  position: relative;
  height: 750rpx;
}

.detail-price {
  padding: 24rpx 30rpx;
  background: linear-gradient(90deg, #fff4f4 5%, #fffcf6 100%);

  .detail-price-first {
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;
  }

  .detail-price-first2 {
    margin-top: 4rpx;
    font-size: 26rpx;
    color: #2d2d2d;
    line-height: 36rpx;
  }

  .detail-price-first3 {
    margin-left: 10rpx;
    font-size: 44rpx;
    color: #fa6400;
    line-height: 60rpx;
    font-weight: bold;
  }

  .detail-price-first4 {
    margin-right: 4rpx;
    font-size: 24rpx;
    line-height: 34rpx;
  }

  .detail-price-balance {
    display: flex;
    align-items: center;
  }

  .detail-price-balance2 {
    display: flex;
    align-items: center;
    height: 58rpx;
    padding: 0 20rpx;
    border-radius: 30rpx;
    background: linear-gradient(98deg, #ff4b4b 9%, #ffac5a 93%);
  }

  .detail-price-balance3 {
    margin-bottom: 2rpx;
    font-size: 26rpx;
    color: #ffffff;
    line-height: 36rpx;
  }

  .detail-price-balance4 {
    margin-left: 8rpx;
    font-size: 36rpx;
    color: #ffffff;
    line-height: 50rpx;
    font-weight: bold;
  }

  .detail-price-balance5 {
    margin-right: 4rpx;
    font-size: 24rpx;
    line-height: 34rpx;
  }

  .detail-price-balance6 {
    margin-left: 10rpx;
    margin-top: 2rpx;
    font-size: 26rpx;
    color: #666666;
    line-height: 36rpx;
  }
}

.detail-info {
  padding: 24rpx 30rpx;
  margin-bottom: 20rpx;
  background-color: #ffffff;

  .detail-info-name {
    margin-bottom: 26rpx;
    font-size: 36rpx;
    color: #333333;
    line-height: 50rpx;
    font-weight: bold;
  }

  .detail-info-tag {
    padding: 0 14rpx;
    margin-right: 20rpx;
    font-size: 24rpx;
    color: #4e9b93;
    line-height: 42rpx;
    border-radius: 8rpx;
    border: 2rpx solid rgba(78, 155, 147, 0.2);
  }

  .detail-info-sale {
    flex-shrink: 0;
    margin-left: auto;
    font-size: 24rpx;
    color: #999999;
  }
}

.detail-intro {
  padding: 40rpx 30rpx 30rpx;
  margin-bottom: 20rpx;
  background-color: #ffffff;

  .detail-intro-title {
    margin-bottom: 30rpx;
    font-size: 32rpx;
    color: #333333;
    line-height: 48rpx;
    font-weight: bold;
  }

  .detail-intro-html {
    color: #666666;
    overflow: hidden;
  }

  .detail-intro-img {
    width: 100%;
  }
}

.detail-course {
  padding: 40rpx 30rpx 0;
  margin-bottom: 20rpx;
  background-color: #ffffff;

  .detail-course-title {
    margin-bottom: 20rpx;
    font-size: 32rpx;
    color: #333333;
    line-height: 48rpx;
    font-weight: bold;
  }

  .detail-course-item {
    position: relative;
  }

  .detail-course-line {
    position: absolute;
    left: 30rpx;
    top: 0;
    right: 30rpx;
    border-bottom: 1rpx solid #eeeeee;
  }
}

.detail-fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  height: 120rpx;
  padding-left: 30rpx;
  padding-right: 30rpx;
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #ffffff;

  .detail-fixed-menu {
    position: relative;
    flex-shrink: 0;
  }

  .detail-fixed-btn {
    flex-grow: 1;
    min-width: 0;
    margin-left: 30rpx;
  }
}
</style>